<script setup lang="ts">
import { areaAddApi, areaEditApi, ruleGetFreeRuleListApi } from '@/apis/card'
import type { AreaI, FreeRuleListItemI } from '@/types/card'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'

const props = defineProps(['dialogVisible', 'dialogParams'])
const emit = defineEmits([
  'update:dialogVisible',
  'update:dialogParams',
  'success',
])

const title = ref('')
const defaultArea = {
  id: undefined,
  areaName: '',
  spaceNumber: undefined,
  areaProportion: undefined,
  remark: '',
  ruleId: undefined,
}
const area = ref<AreaI>({
  id: undefined,
  areaName: '',
  spaceNumber: undefined,
  areaProportion: undefined,
  remark: '',
  ruleId: undefined,
})
const freeRuleList = ref<FreeRuleListItemI[]>([])
const rules = {
  areaName: [{ required: true, message: '请输入区域名称', trigger: 'blur' }],
  spaceNumber: [{ required: true, message: '请输入车位数', trigger: 'blur' }],
  areaProportion: [{ required: true, message: '请输入面积', trigger: 'blur' }],
  ruleId: [{ required: true, message: '请输入关联计费规则', trigger: 'blur' }],
}
const formRef = ref()
const getFreeRuleList = async () => {
  const res = await ruleGetFreeRuleListApi({ page: 1, pageSize: 100 })
  freeRuleList.value = res.rows
}
const openDilaog = () => {
  getFreeRuleList()
  area.value = { ...props.dialogParams }

  if (area.value.id) {
    title.value = '编辑区域'
  } else {
    title.value = '添加区域'
  }
}
const closeDialog = () => {
  emit('update:dialogVisible', false)
  emit('update:dialogParams', { ...defaultArea })
  area.value = { ...defaultArea }
  formRef.value.resetFields()
}
const onSubmit = async () => {
  await formRef.value.validate()

  if (area.value.id) {
    await areaEditApi(area.value)
    ElMessage.success('编辑成功~')
  } else {
    await areaAddApi(area.value)
    ElMessage.success('添加成功~')
  }

  closeDialog()
  emit('success')
}
</script>
<template>
  <el-dialog
    :model-value="dialogVisible"
    :title="title"
    style="width: 30%"
    top="10vh"
    @open="openDilaog"
    @close="closeDialog"
  >
    <el-form label-position="top" :model="area" :rules="rules" ref="formRef">
      <el-form-item label="区域名称" prop="areaName">
        <el-input placeholder="请输入区域名称" v-model="area.areaName" />
      </el-form-item>
      <el-form-item label="车位数(个)" prop="spaceNumber">
        <el-input
          type="number"
          :min="1"
          v-model.number="area.spaceNumber"
          placeholder="请输入车位个数"
        >
          <template #append>个</template>
        </el-input>
      </el-form-item>
      <el-form-item label="面积(m²)" prop="areaProportion">
        <el-input
          type="number"
          :min="1"
          v-model.number="area.areaProportion"
          placeholder="请输入面积"
        >
          <template #append>m²</template>
        </el-input>
      </el-form-item>
      <el-form-item label="关联计费规则" prop="ruleId">
        <el-select v-model="area.ruleId" placeholder="请选择关联计费规则">
          <el-option
            v-for="item in freeRuleList"
            :key="item.id"
            :label="item.ruleName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
          type="textarea"
          placeholder="请输入备注"
          :rows="2"
          v-model="area.remark"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="onSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.el-dialog {
  .el-form {
    width: 80%;
    margin: 0 auto;

    ::v-deep(.el-form-item__label) {
      color: rgb(39, 39, 39);
      font-weight: 500;
    }

    .el-input {
      ::v-deep(.el-input-group__append) {
        color: rgb(59, 59, 59);
      }
    }
  }
}
</style>
